<style type="text/css">
	* {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	


	.close {
		position: absolute;
		right: 8px;
		top: 0px;
		font-size: 22px;
		user-select: none;
		font-style: normal;
		cursor: pointer;
		color: #fff;
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	}

	.close:hover {
		opacity: .1;
		transform: scale(1.2);
	}



	.close-ani{
			-webkit-animation-name: aniclose;
			        animation-name: aniclose;
			-webkit-animation-duration: 0.6s;
			        animation-duration: 0.6s;
			-webkit-animation-timing-function:ease-in-out;
			        animation-timing-function:ease-in-out;
			-webkit-animation-fill-mode:forwards;
			        animation-fill-mode:forwards;
	}
	@-webkit-keyframes aniclose{
		0% {bottom: 0;left: 0}
		100%{bottom: -60vh;left: -100vw}
	}
	@keyframes aniclose{
		0% {bottom: 0;left: 0}
		100%{bottom: -60vh;left: -100vw}
	}
	.closetotop-ani{
			-webkit-animation-name: aniclosetop;
			        animation-name: aniclosetop;
			-webkit-animation-duration: 0.6s;
			        animation-duration: 0.6s;
			-webkit-animation-timing-function:ease-in-out;
			        animation-timing-function:ease-in-out;
			-webkit-animation-fill-mode:forwards;
			        animation-fill-mode:forwards;
	}
	@keyframes aniclosetop{
		0% {bottom: 0;}
		100%{bottom: -60vh;}
	}
	.closetoleft-ani{
			-webkit-animation-name: anicloseleft;
			        animation-name: anicloseleft;
			-webkit-animation-duration: 0.6s;
			        animation-duration: 0.6s;
			-webkit-animation-timing-function:ease-in-out;
			        animation-timing-function:ease-in-out;
			-webkit-animation-fill-mode:forwards;
			        animation-fill-mode:forwards;
	}
	@keyframes anicloseleft{
		0% {left: 0;bottom: 0}
		100%{left: -100vw;bottom: 0}
	}
	.closetoright-ani{
			-webkit-animation-name: anicloseright;
			        animation-name: anicloseright;
			-webkit-animation-duration: 0.6s;
			        animation-duration: 0.6s;
			-webkit-animation-timing-function:ease-in-out;
			        animation-timing-function:ease-in-out;
			-webkit-animation-fill-mode:forwards;
			        animation-fill-mode:forwards;
	}
	@keyframes anicloseright{
		0% {left: 0;bottom: 0}
		100%{left: 100vw;bottom: 0}
	}
	.closetobottom-ani{
			-webkit-animation-name: aniclosebottom;
			        animation-name: aniclosebottom;
			-webkit-animation-duration: 0.6s;
			        animation-duration: 0.6s;
			-webkit-animation-timing-function:ease-in-out;
			        animation-timing-function:ease-in-out;
			-webkit-animation-fill-mode:forwards;
			        animation-fill-mode:forwards;
	}
	@keyframes aniclosebottom{
		0% {left: 0;bottom: 0vh}
		100%{left: 0;bottom: 100vh}
	}
	.popuptotop-ani{
		-webkit-animation-name: anipopuptop;
		        animation-name: anipopuptop;
		-webkit-animation-duration: 1s;
		        animation-duration: 1s;
		-webkit-animation-timing-function:ease-in-out;
		        animation-timing-function:ease-in-out;
		-webkit-animation-fill-mode:forwards;
		        animation-fill-mode:forwards;
	}
	@-webkit-keyframes anipopuptop{
		0% {bottom: -60vh}
		50% {bottom: -4vh}
		65% {bottom: -4.5vh}
		75% {bottom: -1vh}
		100%{bottom: 0}
	}
	@keyframes anipopuptop{
		0% {bottom: -60vh;left:0;}
		50% {bottom: -4vh;left:0;}
		65% {bottom: -4.5vh;left:0;}
		75% {bottom: -1vh;left:0;}
		100%{bottom: 0;left:0;}
	}
	.popuptoleft-ani{
		-webkit-animation-name: anipopupleft;
		        animation-name: anipopupleft;
		-webkit-animation-duration: 1s;
		        animation-duration: 1s;
		-webkit-animation-timing-function:ease-in-out;
		        animation-timing-function:ease-in-out;
		-webkit-animation-fill-mode:forwards;
		        animation-fill-mode:forwards;
	}
	@keyframes anipopupleft{
		0% {left: -100vw;bottom: 0}
		50% {left: -4vw;bottom: 0}
		65% {left: -4.5vw;bottom: 0}
		75% {left: -1vw;bottom: 0}
		100%{left: 0;bottom: 0}
	}
	.popuptoright-ani{
		-webkit-animation-name: anipopupright;
		        animation-name: anipopupright;
		-webkit-animation-duration: 1s;
		        animation-duration: 1s;
		-webkit-animation-timing-function:ease-in-out;
		        animation-timing-function:ease-in-out;
		-webkit-animation-fill-mode:forwards;
		        animation-fill-mode:forwards;
	}
	@keyframes anipopupright{
		0% {left: 100vw;bottom: 0;}
		50% {left: 4vw;bottom: 0;}
		65% {left: 4.5vw;bottom: 0;}
		75% {left: 1vw;bottom: 0;}
		100%{left: 0;bottom: 0;}
	}
	.popuptobottom-ani{
		-webkit-animation-name: anipopupbottom;
		        animation-name: anipopupbottom;
		-webkit-animation-duration: 1s;
		        animation-duration: 1s;
		-webkit-animation-timing-function:ease-in-out;
		        animation-timing-function:ease-in-out;
		-webkit-animation-fill-mode:forwards;
		        animation-fill-mode:forwards;
	}
	@keyframes anipopupbottom{
		0% {bottom: 100vh;left:0;}
		50% {bottom: -4vh;left:0;}
		65% {bottom: -4.5vh;left:0;}
		75% {bottom: -1vh;left:0;}
		100%{bottom: 0;left:0;}
	}
</style>
<style>
    #btn {
        width: 60px;
        height: 60px;
        position: fixed;
        /* //固定定位设置 */
        right: 30px;
        bottom: 30px;
        background-color: rgb(207, 207, 207);
        border-radius: 30px;
        display: none;
        justify-content: center;
        align-items: center;
        color: honeydew;
    }

    .box {
        /* border: solid 1px #C9C9C9; */
        margin: 10px;
    }

    /* 如果list没给高度则给一个默认高度 */
    .iframe-card {
        height: 40vh;
    }

    .word-card {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;

    }

    .word {
        /* margin:10px !important; */
        /* border: 1px solid #C9C9C9; */
        background-color: #fff;
        font-size: 12px;
        color: #ffffff;
        text-decoration: none;
        cursor: pointer;
        padding: 7px;
        background-color: gray;
        transition: all 0.6s;

    }

    .word:hover {
        transform: scale(1.2);
    }

    .show_component {
        border: 1px solid #C9C9C9;
        display: flex;
        flex-direction: column;
        height: 100%;
        margin-top: 10px;
    }

    .btn-card {
        /* background-color: rgba(0, 0, 0, 0.507); */
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin: 10px;
    }

    .btn-card .small {
        margin-right: 5px;
    }
    .avatar{
        width: 27px;
        height: 27px;
        border-radius: 50%;
		margin-bottom: 10px;
    }
    .author-info{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }
    .author-info .name{
		margin-left:10px;
        font-size: 14px;
        color: #aaa;
        line-height: 25px;
    }
    .author-info .tag{
		margin-left:10px;
        color: #aaa;
        font-size: 12px;
        line-height: 22px;
    }
    .author-info button{
        margin-left: auto;
        margin-right: 10px;
    }
    .bar{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
	.xx-waterflow{
		width: 100%;
		height: 100%;
		position: relative;
	}
	
</style>

<!-- ugc / 非全屏弹出框 start-->
<div class="popup_model_select_component_left" data-closeani='close-ani'
	style="position: fixed;bottom: -100vh;height: 100vh;width: 670px;background-color: #000;opacity: 0.9;color: #fff;">
	<i class="close">&#10005;</i>
	<div style="display: flex;flex-direction: row;width: 100%;margin-top: 40px;padding: 0 10px;height: calc(100% - 40px);">
		<div style="margin-left:10px;width: 300px;display: flex;flex-direction: column;padding-right: 10px;align-items: center;justify-content: center;">
			<div id="component_list" ></div>
			<hr>
			<div id="component_list_2" ></div>
		</div>
		<div style="overflow: hidden;overflow: scroll;">
			<div id="component_type_list" class="xx-waterflow" ></div>
		</div>
		<div id="component_container" ></div>
	</div>
</div>

<script type="text/javascript" id="modelscript">
	
	//加载component_select
	$('#component_container').load("select_component.html");
	//阻止弹出框的点击事件冒泡
	$('.popup_model_select_component_left').click(function (event) {
		event.stopPropagation();
	});
	//点击除了弹出框以及触发弹出框弹出的按钮，使弹出框的返回
	$(document).click(function (event) {
		var popup = $('.popup_model_select_component_left'),
			btn=$('.popupbtn_select_component'),
			popup_closeani = btn.data('closeani'),
			popup_openani=btn.data('openani'),
			target = $(event.target);
		if (target.hasClass('popupbtn_select_component') || $(target).hasClass('popup')) {
			return false;
		}
		//如果当前弹出框是出现状态，则点击后触发弹框返回
		if (popup.hasClass(popup_openani)) {
			popup.removeClass(popup_openani).addClass(popup_closeani);
		}
	});
	//open按钮事件
	$('.popupbtn_select_component').on('click', function (event) {
		
		var popup = $('.popup_model_select_component_left'),
			btn = $(this),
			popup_closeani = btn.data('closeani'),
			btnani = btn.data('btnani'),
			popup_openani=btn.data('openani');
		popup.removeClass(popup_openani).removeClass(popup_closeani);
		btn.removeClass(btnani);
		setTimeout(function () {
			popup.addClass(popup_openani);
			btn.addClass(btnani);
		});
	});


	//弹出框的关闭按钮事件
	$('.close').on('click', function (event) {
		//阻止冒泡
		event.stopPropagation();
		var popup = $('.popup_model_select_component_left'),
			btn=$('.popupbtn_select_component'),
			popup_closeani = btn.data('closeani'),
			popup_openani=btn.data('openani');
		popup.removeClass(popup_openani).addClass(popup_closeani);

	});
</script>
<!-- ugc / 非全屏弹出框 end-->